<template>
  <el-card>
    <el-form :inline="true" class="form">
      <el-form-item label="用户名:">
        <el-input placeholder="请你输入搜索用户名" v-model="pageRequest.model.username"
                  @keyup.enter="search"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称:">
        <el-input placeholder="请你输入搜索用户昵称" v-model="pageRequest.model.name" @keyup.enter="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
        <el-button type="primary" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 0px;">
    <!-- table展示用户信息 -->
    <el-table @selection-change="selectChange" style="margin: 10px 0px;" border :data="userArr">
      <el-table-column type="selection" align="center"></el-table-column>
      <!--      <el-table-column label="#" align="center" type="index"></el-table-column>-->
      <el-table-column label="token" align="center" prop="uid" show-overflow-tooltip></el-table-column>
      <el-table-column label="用户名" align="center" prop="username" show-overflow-tooltip></el-table-column>
      <el-table-column label="用户昵称" align="center" prop="name" show-overflow-tooltip></el-table-column>
      <el-table-column label="登录Ip" align="center" prop="loginIp" show-overflow-tooltip></el-table-column>
      <el-table-column label="登录时间" align="center" prop="loginDate" show-overflow-tooltip>
        <template #default="scope">
          {{ formatTimestamp(scope.row.loginDate) }}
        </template>
      </el-table-column>
      <el-table-column label="当前用户"  width="100" align="center" prop="currentUser" show-overflow-tooltip>
        <template #default="scope">
          <!-- 根据不同的状态显示不同的颜色或类型 -->
          <el-tag v-if="scope.row.currentUser === true" type="warning">是</el-tag>
          <el-tag v-if="scope.row.currentUser === false" type="success">不是</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template #="{ row, $index }">
          <el-button type="primary" size="small" icon="Delete" @click="updateUser(row)">
            强退
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:current-page="pageRequest.page.index" v-model:page-size="pageRequest.page.size"
                   :page-sizes="[10, 20, 30, 50]"
                   :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
                   @current-change="getHasUser"
                   @size-change="handler"/>
  </el-card>
</template>

<script setup lang="js">
//默认页码
import {onMounted, ref} from "vue";
import {findPageApi,forceLogoutApi} from "@/api/system/online";
import useLayOutSettingStore from "@/store/modules/setting.js";
import setting from "@/setting.js";
import {ElMessage} from "element-plus";
import {formatTimestamp} from "@/utils/time.js";
//分页查询请求参数
let pageRequest = ref({
  page: {
    index: 1,
    size: 10,
  },
  model: {
    username: '',
    name: '',
    status: '',
  }
});
//用户总个数
let total = ref(0);
//储存全部用户数据
let userArr = ref([]);

//准备一个数组存储批量删除的用户的ID
let selectIdArr = ref([]);
//获取模板setting仓库
let settingStore = useLayOutSettingStore();

//获取全部已有用户信息
const getHasUser = async (pager = 1) => {
  pageRequest.value.page.index = pager;
  let result = await findPageApi(pageRequest.value);
  if (result.code == setting.SYSTEM_SUCCESS) {
    total.value = result.data.total;
    userArr.value = result.data.items;
  }
}

const updateUser = (row) => {
  forceLogoutApi(row.uid).then((result) => {
    if (result.code == setting.SYSTEM_SUCCESS) {
      ElMessage({type: 'success', message: '强制退出成功'});
      getHasUser();
    }
  })

}

//分页器下拉菜单的自定义事件回调
const handler = () => {
  getHasUser()
}

//table复选框勾选的时候会触发的事件
const selectChange = (value) => {
  selectIdArr.value = value;
}
//搜索按钮的回调
const search = () => {
  //根据关键字获取相应的用户数据
  getHasUser();
  //清空关键字
  //keyword.value = '';
}
//重置按钮
const reset = () => {
  settingStore.refsh = !settingStore.refsh;
}

//组件挂载完毕自动获取信息
onMounted(() => {
  getHasUser();
})
</script>

<style scoped>
.form {
  margin-top: 15px;
  display: flex;
  align-items: center;
}
</style>
